<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 一个解决问题的方案 
        // 三阶段 vue 双向数据绑定  
        // 页面上  数据改了    立马同步到数据库
        // 数据库数据更新   立马同步到页面上
        // 假如 国产新手机发布
        // 没有设计模式 
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有
        // -> 跑到旗舰店  问 有现货么 , 暂时没有

        // 有了设计模式 

        // 跑到旗舰店 给小姐姐买奶茶 加微信  
        // 说 有现货第一时间通知 

        // 事件  元素.addEventListener('类型',函数)


        // + 杜   iphone14 
        // + 杜   iwatch  
        // + 杜   imac  
        // + 张   iphone13 
        // + 张   ipad 
        // + 李   imac
        // + 李   iphone14 
        // + 李   iphone13  

        // iphone14 [杜,李]
        // iphone13 [张,李]
        // ipad     [张]
        // imac     [杜,李]
        // iwatch   [杜]

        // 转成对象  
        // 杜 李 刘 张 宋是方法 
        // {
        //     iphone14:[杜,李,刘],
        //     iphone13:[张,李],
        //     ipad:[张],
        //     imac:[李,宋],
        //     iwatch:[杜],
        //     itouch:[夏],
        // }

        // {
        //     'iphone14':[du,zhang,wang],
        //     'iphone13':[li],
        //     'huawei':[du,wang,li,zhang]
        // }
        // 提前准备 一些事件处理函数
        function du(message){
            console.log('杜先生',message)
        }
        
        function zhang(message){
            console.log('张先生',message)
        }
        function li(message){
            console.log('李先生',message)
        }

        function wang(message){
            console.log('王先生',message)
        }

        class  Observer{
            constructor(){
                this.messages = {} ;
                // 这个最终的结果
                // {'iPhone13':['杜','李']}
            }
            //自己写的方法  不是自带
            // 往 添加信息
            my_add(type,fn){
               if(!this.messages[type]){
                    // 说明对象中不存在这个键
                    // 给这个建赋值一个空数组 
                    this.messages[type] = [];
               }
               // 一定是个数组 fn加入到数组中
                this.messages[type].push(fn);
            }

            // 自己写的方法  移出this.message信息

            my_remove(type,fn){
                // 如果只传了type 没有传fn 
                // 证明你想删除整个键值对
                // 删除对象 delete 对象名[键的名字]
                if(!fn){
                    delete this.messages[type];
                    return
                }
                this.messages[type] = this.messages[type].filter(item=>{item !== fn})
            }

            // 发通知 触发  
            my_trigger(type){
                // 通知信息
                const info = {
                    date:new Date(),
                    type,
                    address:'恒隆广场',
                };
                //根据type拿到所有的方法
                // 把info当做实参传给这些方法
                this.messages[type].forEach(item =>{
                    item(info);
                })
                // console.log(this.messages[type]);

            }

            get_info(){
                return this.messages
            }



        }


        const xiaojiejie = new Observer();
        xiaojiejie.my_add('iphone14',du);
        xiaojiejie.my_add('iphone14',wang);


        xiaojiejie.my_add('iphone13',zhang);
        xiaojiejie.my_add('imac',li);

        console.log(xiaojiejie.get_info());


        // xiaojiejie.my_trigger('iphone14');
        // xiaojiejie.my_trigger('iphone13');
        xiaojiejie.my_trigger('imac');


    </script>
</body>
</html> 